import React,{Component} from "react";
import {connect} from 'react-redux';
import * as action from "../action";
import { Button, Radio, Icon,Input  } from 'antd';
const mapStateToProps=(state)=>{
    console.log(state);
    return {
        details:state.details,
        counter:state.counter
    }
}

 class Productdetails extends Component{
    
    addtocarts(){
      var obj={
          id:this.props.details[0].id,
          title:this.props.details[0].title,
          price:this.props.details[0].price,
          num:this.props.counter.count
      }
      console.log(obj);
      this.props.addToCart(obj);
    }
    render(){
        const {content,id,img,price,title}=this.props.details[this.props.details.length-1];
        const num=this.props.counter.count;
        const {increase,decrease}=this.props;
        console.log(num);
        console.log(this.props);
        // console.log(img);
        return(
            <div className="container" style={{marginTop:20}}>
                <div className="col-md-12 productdetailsdiv" >
                    <div className="col-md-5">
                        <img src={img} style={{width:460,height:460}}/>
                    </div>
                    <div className="col-md-1"></div>
                    <div className="col-md-6">
                        <ul>
                            <li style={{fontSize:20,marginBottom:10}}><span>商品： </span><span>{title}</span></li>
                            <li style={{fontSize:20,marginBottom:10}}> <span >详情：</span><span style={{color:"blue"}}>{content}</span></li>
                            <li style={{fontSize:20,marginBottom:10}}> <span>价格：</span><span>{price}</span></li>
                            <li style={{fontSize:20,marginBottom:10}}>
                                <Button style={{height:40}} onClick={decrease}>--</Button>
                                <Input placeholder="Basic usage" style={{width:200,height:40}} value={num}/>
                                <Button style={{height:40}} onClick={increase}>++</Button>
                            </li>
                            <li style={{fontSize:20,marginBottom:10}}>
                                <Button type="danger" onClick={()=>this.addtocarts()}>加入购物车</Button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(mapStateToProps,action)(Productdetails);